import React, { useCallback, useEffect, useState } from 'react';
import {
  Modal,
  Button,
  Form,
  Input,
  Space,
  Cascader,
  InputNumber,
  Image,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import UploadOSS from '@/components/UploadOSS';
import EditorDemo from '@/components/EditorDemo';
import { fetchGoodsCategory } from '@/services/goods';
import styles from './index.less';

const wrapperCol = { offset: 8, span: 16 };

interface AddOrEditProps {
  isModalVisible: boolean;
  onCancelWrite: () => void;
  flag: string;
  onSubmit: (valuse: any) => void;
  goodsData: any;
}

const AddOrEdit: React.FC<AddOrEditProps> = ({
  isModalVisible,
  onCancelWrite,
  flag,
  onSubmit,
  goodsData,
}) => {
  const [options, setOptions] = useState<any[]>([]);
  const [isPicShow, setIsPicShow] = useState<boolean>(true);
  const [form] = Form.useForm();
  const handleCancel = useCallback(() => {
    onCancelWrite();
    form.resetFields();
  }, [onCancelWrite, form]);

  const handleSetFilesURL = useCallback((url) => {
    form.setFieldsValue({ cover: url });
    setIsPicShow(false);
  }, []);

  const handleHtmlContent = useCallback((content) => {
    form.setFieldsValue({ details: content });
  }, []);

  const handleFinsh = useCallback(
    (values) => {
      onSubmit({ ...values, category_id: values.category_id[1] });
      setIsPicShow(false);
    },
    [onSubmit],
  );

  const handleReset = useCallback(() => {
    form.resetFields();
  }, [form]);

  useEffect(() => {
    fetchGoodsCategory().then((res) => {
      setOptions(res);
    });
  }, []);

  useEffect(() => {
    if (flag === 'edit') {
      setIsPicShow(true);
      form.setFieldsValue(goodsData);
    } else if (flag === 'add') {
      form.resetFields();
    }
  }, [flag, form, goodsData]);

  return (
    <Modal
      title={flag === 'add' ? '添加商品' : '编辑商品'}
      visible={isModalVisible}
      onCancel={handleCancel}
      footer={null}
      forceRender={true}
      destroyOnClose={true}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleFinsh}
        preserve={false}
      >
        <Form.Item
          label="分类"
          name="category_id"
          rules={[{ required: true, message: '请选择分类' }]}
        >
          <Cascader
            options={options}
            fieldNames={{ label: 'name', value: 'id' }}
            placeholder="请选择分类"
          />
        </Form.Item>

        <Form.Item
          label="商品名"
          name="title"
          rules={[{ required: true, message: '请输入商品名' }]}
        >
          <Input placeholder="请输入商品名" />
        </Form.Item>

        <Form.Item
          label="描述"
          name="description"
          rules={[{ required: true, message: '请输入描述' }]}
        >
          <Input.TextArea placeholder="请输入描述" />
        </Form.Item>

        <Form.Item
          label="价格"
          name="price"
          rules={[{ required: true, message: '请输入价格' }]}
        >
          <InputNumber
            min={0}
            max={99999999}
            placeholder="请输入价格"
            controls={false}
            className={styles.numberBtn}
          />
        </Form.Item>

        <Form.Item
          label="库存"
          name="stock"
          rules={[{ required: true, message: '请输入库存' }]}
        >
          <InputNumber
            min={1}
            max={999}
            placeholder="请输入库存"
            controls={false}
            className={styles.numberBtn}
          />
        </Form.Item>

        <Input hidden={true} name="cover" />

        <Form.Item
          label="封面图"
          name="cover"
          rules={[{ required: true, message: '请上传' }]}
        >
          <>
            <UploadOSS
              accept="image/*"
              listType="picture"
              maxCount={1}
              showUploadList={true}
              onSetFilesURL={handleSetFilesURL}
              isModalVisible={isModalVisible}
            >
              <Button icon={<UploadOutlined />}>请选择封面图</Button>
            </UploadOSS>
            {isPicShow && goodsData.cover_url ? (
              <Image src={goodsData.cover_url} width={200} />
            ) : null}
          </>
        </Form.Item>

        <Form.Item
          label="详情"
          name="details"
          rules={[{ required: true, message: '请输入详情' }]}
        >
          <EditorDemo
            onHtmlContent={handleHtmlContent}
            defaultContent={goodsData.details}
          />
        </Form.Item>

        <Form.Item wrapperCol={wrapperCol}>
          <Space>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button onClick={handleReset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddOrEdit;
